<template>
	<div class="Statistics-1">
		<div class="xiaoquStatistics">
			<div class="common-layout-xqxx">
				<el-container>
					<el-header class="xqxx-header-flex">
						<div style="font-weight: bold;">小区信息</div>
						<div>
							<el-button link>添加房屋</el-button>
							<el-button link>添加车位</el-button>
						</div>
					</el-header>
					<el-main class="xqxx-main">
						<div>
							<div>
								<img /><span>楼宇</span>
							</div>
							<span>{{louyu}}</span>
						</div>
						<div>
							<div>
								<img /><span>单元</span>
							</div>
							<span>{{danyuan}}</span>
						</div>
						<div>
							<div>
								<img /><span>房屋</span>
							</div>
							<span>{{fangwu}}</span>
						</div>
						<div>
							<div>
								<img /><span>停车位</span>
							</div>
							<span>{{chewei}}</span>
						</div>
					</el-main>
				</el-container>
			</div>
			<div class="xqtj">
				<div class="djzh-common-layout">
					<el-container>
						<el-header class="djzh-header">
							<el-button link class="register-button">登记住户</el-button>
						</el-header>
						<el-main class="zhzs-main">
							<div class="household-info">
								<img />
								<span>住户总数</span>
							</div>
							<span class="household-count">{{zhuhu}}</span>
						</el-main>
					</el-container>
				</div>
				<div class="djcl-common-layout">
					<el-container>
						<el-header class="djcl-header">
							<el-button link class="registerCar-button">登记车辆</el-button>
							<el-button class="ShenHeCar">待审核:0</el-button>
						</el-header>
						<el-main class="djcl-main">
							<div class="djcl-info">
								<img />
								<span>车辆</span>
							</div>
							<span class="djcl-count">{{car}}</span>
						</el-main>
					</el-container>
				</div>
			</div>
		</div>
		<div class="zhtjt-common-layout">
			<el-container>
				<el-header class="zhtjt-custom-header">
					<div class="zhtjt-left-content">
						住户状态统计
					</div>
					<div class="zhtjt-right-content">
						<el-button class="zhtjt-DaiShenHe">待审核: 0</el-button>
					</div>
				</el-header>
				<el-main class="zhtjt-main">
					<div ref="zhzt_chart" style="width: 100%; height: 250px;"></div>
				</el-main>
			</el-container>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, onMounted, reactive } from 'vue';
	import * as echarts from "echarts";
	import $http from '../router/AxiosApi';
	const zhzt_chart = ref<HTMLElement | null>(null);

	const cs = ref([new Date("2024-07-01"), new Date("2024-07-07")])
	console.log(cs.value)

	onMounted(() => {
		const myChart = echarts.init(zhzt_chart.value!);
		const zhzt_option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '5%',
				left: 'center'
			},
			series: [{
				type: 'pie',
				radius: ['30%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 18,
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{ value: 1048, name: '登记住户' },
					{ value: 735, name: '小区住户' }
				]
			}]
		};

		myChart.setOption(zhzt_option);
	});
	const carform = reactive({
		car_id: '',
		car_num: '',
		car_label: ''
	})
	const car=ref(null)
	$http.post("/CarList", carform).then((res) => {
		const carList = res.data.data;
		car.value=carList.length
	})
	const zhuhu=ref(null)
	$http.post("/ZhuHuList").then((res)=>{
		const zhuhuList = res.data.data;
		zhuhu.value=zhuhuList.length
	})
	const louyu=ref(null)
	$http.post("/ZhuHuList").then((res)=>{
		const louyuList = res.data.data;
		louyu.value=louyuList.length
	})
	const danyuan=ref(null)
	$http.post("/UnitList").then((res)=>{
		const danyuanList = res.data.data;
		danyuan.value=danyuanList.length
	})
	const fangwu=ref(null)
	$http.post("/HouseList").then((res)=>{
		const fangwuList = res.data.data;
		fangwu.value=fangwuList.length
	})
	const chewei=ref(null)
	$http.post("/ParkList").then((res)=>{
		const cheweiList = res.data.data;
		chewei.value=cheweiList.length
	})
	
</script>

<style scoped>
	.Statistics-1 {
		width: 1390px;
		margin-left: 10px;
		margin-top: 20px;
		display: flex;
	}

	.xiaoquStatistics {
		width: 890px;
		height: 300px;
	}

	.common-layout-xqxx {
		width: 890px;
		border-radius: 10px;
		background-color: white;
	}

	.xqtj {
		display: flex;
		width: 890px;
		height: 140px;
		margin-top: 10px;
	}

	.djzh-common-layout {
		width: 640px;
		height: 140px;
		background-color: white;
		border-radius: 10px;
	}

	.djcl-common-layout {
		width: 630px;
		height: 140px;
		background-color: white;
		border-radius: 10px;
		margin-left: 10px;
	}

	.zhtjt-common-layout {
		width: 590px;
		background-color: white;
		border-radius: 10px;
		margin-left: 10px;
	}

	.xqxx-header-flex {
		display: flex;
		/* 使用flexbox布局 */
		justify-content: space-between;
		/* 在容器内部均匀分布项目，使其水平排列 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.header-flex el-button {
		margin-left: 10px;
		/* 按钮之间的间距，可以根据需要调整 */
		margin-right: 10px;
	}

	.xqxx-main {
		display: flex;
		justify-content: space-between;
		/* 使每个块在水平方向上均匀分布 */
	}

	.xqxx-main>div {
		flex: 1;
		/* 块的自动扩展，使它们平均占据可用空间 */
		text-align: center;
		/* 文本居中对齐 */
		padding: 10px;
		/* 可根据需要调整内边距 */
	}

	.xqxx-main>div>div {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 5px;
		/* 调整内部元素之间的垂直间距 */
	}

	.xqxx-main>div>div img {
		margin-right: 6px;
		/* 图片与文字之间的间距 */
	}

	.xqxx-main>div>div span {
		margin-left: 6px;
		/* 图片与文字之间的间距 */

	}

	.xqxx-main>div>span {
		display: block;
		/* 使数字单独一行 */
		font-weight: bold;
		font-size: 25px;
	}

	.register-button {
		float: right;
		/* 可以根据需要设置其他按钮样式 */
	}

	/* 住户信息区域样式 */
	.household-info {
		text-align: left;
		margin-left: 15px;
		/* 可以根据需要设置住户信息区域样式 */
	}

	/* 住户总数文本样式 */
	.household-count {
		display: block;
		text-align: left;
		margin-left: 15px;
		font-weight: bold;
		font-size: 25px;
		/* 可以根据需要设置住户总数文本样式 */
	}

	.djzh-header {
		height: 35px;
	}

	.zhzs-main {
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 25px;
	}

	.djzh-common-layout {
		padding-top: 20px;
	}

	.djcl-header {
		height: 35px;
		display: flex;
		/* 两个按钮之间的空间分配 */
		align-items: center;
		/* 垂直居中对齐按钮 */
		padding: 10px;
		padding-top: 0px;
		margin-left: 365px;
	}

	.djcl-main {
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 25px;
	}

	.djcl-common-layout {
		padding-top: 20px;
	}

	.djcl-info {
		text-align: left;
		margin-left: 15px;
		/* 可以根据需要设置住户信息区域样式 */
	}

	.djcl-count {
		display: block;
		text-align: left;
		margin-left: 15px;
		font-weight: bold;
		font-size: 25px;
		/* 可以根据需要设置住户总数文本样式 */
	}

	.ShenHeCar {
		float: right;
		background-color: #F46C6C;
		color: white;
	}

	.zhtjt-custom-header {
		display: flex;
		justify-content: space-between;
		/* 左右对齐 */
		align-items: center;
		/* 垂直居中 */
		padding: 10px;
		/* 可以根据需要设置内边距 */
	}

	.zhtjt-left-content {
		font-weight: bold;
	}

	.zhtjt-DaiShenHe {
		background-color: #F46C6C;
		color: white;
	}

	.zhtjt-main {
		height: 295px;
	}
</style>